<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Media</a></li>
        <li>Video</li>
    </ul>        
</div>    

<div class="content">
            
    <div class="row-fluid">                        
        
        <div class="span8">                            
            
            <div class="widget">
                                    
                <div class="head dark">
                    <div class="icon"><span class="icos-videos"></span></div>
                    <h2>Video player</h2>
                </div>                                               
                <div class="block-fluid">
                    <video width="640" height="360" id="video" style="width: 100%; height: 100%;" src="assets/media/echo-hereweare.mp4" type="video/mp4" poster="assets/media/echo-hereweare.jpg" controls="controls" preload="none">                            
                        <object width="640" height="360" type="application/x-shockwave-flash" data="js/plugins/media/flashmediaelement.swf"> 		
                                <param name="movie" value="js/plugins/media/flashmediaelement.swf" /> 
                                <param name="flashvars" value="controls=true&amp;file=assets/media/echo-hereweare.mp4" /> 		                            
                                <img src="assets/media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" title="No video playback capabilities" />
                        </object> 	                                                        
                    </video>
                </div>
                
                <div class="toolbar">
                    <button class="btn" id="videoPlay">Play</button>
                    <button class="btn" id="videoPause">Pause</button>                        
                </div>
            </div>
            <div class="widget">
                                    
                <div class="head dark">
                    <div class="icon"><span class="icos-videos"></span></div>
                    <h2>Videos</h2>
                </div>                     
                <div class="sGallery clearfix">
                    <div class="item" id="sVideo_1">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>
                    </div>
                    <div class="item" id="sVideo_2">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>
                    </div>
                    <div class="item" id="sVideo_3">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>
                    </div>
                    <div class="item" id="sVideo_4">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>
                    </div>
                    <div class="item" id="sVideo_5">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>   
                    </div>  
                    <div class="item" id="sVideo_5">
                        <a href="javascript:video.setSrc('assets/media/echo-hereweare.mp4');"><img src="assets/media/echo-hereweare.jpg" width="220"/></a>
                        <ul class="controls">                                
                            <li><i class="icon-download-alt"></i> 5,235 Kb</li>
                            <li><i class="icon-heart"></i> 342</li>
                            <li><i class="icon-remove"></i> <a href="#" class="remove">Remove</a></li>
                        </ul>   
                    </div>                        
                </div>
            </div>
            
        </div>
                               
        <div class="span4">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><span class="icosg-videos"></span></div>
                        <h2>Video from Youtube</h2>
                    </div>
                <div class="block-fluid">
                    <video style="width: 100%; height: 100%;" id="player1" preload="none">
                        <source type="video/youtube" src="http://www.youtube.com/watch?v=BrLmsgGrxAU" />
                    </video>                
                </div>                
            </div>

            <div class="widget">
                <div class="head">
                    <div class="icon"><span class="icosg-videos"></span></div>
                    <h2>Vimeo video</h2>
                </div>
                <div class="block-fluid video vimeo widescreen">
                    <iframe src="http://player.vimeo.com/video/31460079?portrait=0&amp;badge=0&amp;color=ff9933" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </div>                    
            </div>                
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><span class="icosg-videos"></span></div>
                    <h2>Youtube video</h2>
                </div>
                <div class="block-fluid video widescreen">
                    <iframe src="http://www.youtube.com/embed/BrLmsgGrxAU" frameborder="0" allowfullscreen></iframe>                    
                </div>                    
            </div>
        </div>            
        
    </div>        
    
</div>  